<script setup lang="ts">
import { ref, onMounted } from 'vue';

const activeMenu = ref('members');
const selectedFamily = ref('林氏');
const families = [
  { value: '林氏', label: '林氏理事会' },
  { value: '张氏', label: '张氏宗亲会' },
  { value: '黄氏', label: '黄氏委员会' }
];

onMounted(() => {
  // 根据路由设置默认激活菜单项
  const path = window.location.hash.split('/')[1] || 'members';
  activeMenu.value = path;
});
</script>

<template>
  <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 当前家族选择 -->
      <div class="family-selector  mx-auto bg-[#f8f3ef] w-100 h-10  rounded">
        <h3 text-color="#964b00">当前理事会：</h3>
        <el-select v-model="selectedFamily" placeholder="当前家族理事会" size="default">
          <el-option
            v-for="family in families"
            :key="family.value"
            :label="family.label"
            :value="family.value"
          />
        </el-select>
      </div>

      <!-- 理事会信息卡片 -->
      <el-card class="clan-info-card  mx-auto mt-6 " >
        <el-row :gutter="20">
          <!-- 封面区域 -->
          <el-col :span="8">
            <div class="cover-section">
              <h2 class="section-title">理事会封面</h2>
              <div class="cover-image-wrapper">
                <img 
                  src="https://picsum.photos/seed/clan-cover/400/300" 
                  alt="理事会封面"
                  class="cover-image"
                >
              </div>
            </div>
          </el-col>
          
          <!-- 基本信息区域 -->
          <el-col :span="24-8">
            <div class="info-section">
              <el-row :gutter="20">
                <el-col :span="18">
                  <dl class="info-list">
                    <dt>名称</dt>
                    <dd>林氏理事会</dd>
                    
                    <dt>地址</dt>
                    <dd>浙江省杭州市临安区</dd>
                    
                    <dt>分支数量</dt>
                    <dd>12个</dd>
                    
                    <dt>创建时间</dt>
                    <dd>2020年</dd>
                    
                    <dt>人数</dt>
                    <dd>68人</dd>
                  </dl>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>

        <!-- 简介区域 -->
        <div class="description-section mt-8">
          <h2 class="section-title">理事会简介</h2>
          <p class="description-text h-250px overflow-auto">
            林氏理事会成立于2020年，由宗族核心成员组成，负责统筹管理家族事务。理事会下设祭祀组、族谱组、公益组三大职能机构，定期组织祭祖活动、修订族谱、开展扶贫助学项目...
            林氏理事会成立于2020年，由宗族核心成员组成，负责统筹管理家族事务。理事会下设祭祀组、族谱组、公益组三大职能机构，定期组织祭祖活动、修订族谱、开展扶贫助学项目...
            林氏理事会成立于2020年，由宗族核心成员组成，负责统筹管理家族事务。理事会下设祭祀组、族谱组、公益组三大职能机构，定期组织祭祖活动、修订族谱、开展扶贫助学项目...
            林氏理事会成立于2020年，由宗族核心成员组成，负责统筹管理家族事务。理事会下设祭祀组、族谱组、公益组三大职能机构，定期组织祭祖活动、修订族谱、开展扶贫助学项目...
            林氏理事会成立于2020年，由宗族核心成员组成，负责统筹管理家族事务。理事会下设祭祀组、族谱组、公益组三大职能机构，定期组织祭祖活动、修订族谱、开展扶贫助学项目...
            林氏理事会成立于2020年，由宗族核心成员组成，负责统筹管理家族事务。理事会下设祭祀组、族谱组、公益组三大职能机构，定期组织祭祖活动、修订族谱、开展扶贫助学项目...
            林氏理事会成立于2020年，由宗族核心成员组成，负责统筹管理家族事务。理事会下设祭祀组、族谱组、公益组三大职能机构，定期组织祭祖活动、修订族谱、开展扶贫助学项目...
            林氏理事会成立于2020年，由宗族核心成员组成，负责统筹管理家族事务。理事会下设祭祀组、族谱组、公益组三大职能机构，定期组织祭祖活动、修订族谱、开展扶贫助学项目...
            林氏理事会成立于2020年，由宗族核心成员组成，负责统筹管理家族事务。理事会下设祭祀组、族谱组、公益组三大职能机构，定期组织祭祖活动、修订族谱、开展扶贫助学项目...
          </p>
        </div>
      </el-card>

      <el-card class="mt-4 clan-info-card">
        <h2 class="section-title">常用功能</h2>
        <div class="button">
          <el-button type="primary">家族邀请码</el-button>
          <el-button type="primary">创建家族</el-button>
          <el-button type="primary">退出理事会</el-button>
        </div>
      </el-card>
    </div>
</template>

<style lang="scss" scoped>
.main-content {
  padding: 20px;
  flex: 1;
  
  .family-selector {
    display: flex;
    align-items: center;
    
    .el-select {
      width: 240px;
      line-height: 30px;
    }
  }
  
  .clan-info-card {
    border-radius: 12px;
    border: 1px solid #e0d6c8;
    background: linear-gradient(135deg, #f8f4f0 0%, #f5f0e8 100%);
    
    .section-title {
      font-size: 1.5rem;
      color: #964b00;
      font-weight: bold;
      margin-bottom: 16px;
    }
    
    .cover-section {
      .cover-image-wrapper {
        border: 1px solid #e0d6c8;
        padding: 8px;
        
        .cover-image {
          width: 100%;
          height: 240px;
          object-fit: cover;
          border-radius: 4px;
        }
      }
    }
    
    .info-section {
      .info-list {
        dt {
          font-size: 1.1rem;
          color: #a98c72;
          margin-bottom: 4px;
        }
        dd {
          font-size: 1.2rem;
          color: #5a4a3a;
          margin-bottom: 12px;
        }
      }
      
    }
    
    .description-section {
      .description-text {
        font-size: 1.1rem;
        color: #5a4a3a;
        line-height: 1.6;
        padding: 24px;
        border-top: 1px solid #e0d6c8;
      }
    }
  }
}


</style>